<template>
  <div class="circle text-pink-900">
    <div class="shell flex justify-center w-[100%] h-[100vh] bg-gradient-to-b from-purple-500 to-pink-500">
      <div class="box relative">
        <img src="./imgs/01.png" class="animate-bounce" />

        <div class="title-c textShadow1 absolute top-[190px] left-[50%] translate-x-[-50%]">刘姝最好看</div>
        <div class="cloud" ref="cloud">
          <!-- <block v-for="(item, index) in textArr">
            <JsxCpn class="JsxCpn" :text="item" :left="Math.random() * 320 + index" ref="JsxCpnRef"></JsxCpn>
          </block> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const cloud = ref<HTMLElement>();

import { useRouter } from 'vue-router';
let router = useRouter();

const popstate = () => {
  console.log('回退');
  router.push('/index');
};

onBeforeMount(() => {
  window.addEventListener('popstate', popstate, false);
});

const texta = '刘姝最好看❥';

//随机子
let getRandomText = (text: string) => {
  let res = text[Math.floor(Math.random() * text.length)];

  return res;
};

//下雨
let rain = () => {
  // const cloud = document.querySelector('.cloud');
  const e = document.createElement('div');
  const left = Math.floor(Math.random() * 310);
  const size = Math.random() * 1.5;
  const duration = Math.random() * 1;
  const text = getRandomText(texta);
  // e.classList.add('text');

  e.setAttribute('class', 'text');

  e.innerText = text;
  e.style.left = left + 'px';
  e.style.top = -10 + 'px';
  e.style.fontSize = 0.5 + size + 'em';
  e.style.animationDuration = 1 + duration + 's';
  e.style.position = 'absolute';
  e.style.textShadow = ' 0 0 5px #fff, 0 0 15px #fff, 0 0 30px #fff';
  e.style.color = '#fff';

  cloud.value?.appendChild(e);
  setTimeout(() => {
    cloud.value?.removeChild(e);
  }, 2000);
};
setInterval(rain, 40);
</script>

<style lang="scss" scoped>
.shell {
  overflow: hidden;
}
</style>

<style lang="scss" scoped>
// 隐藏 routerView之外的的元素
.circle {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
}
.cloud {
  position: relative;
  top: -50px;
  .text {
    animation: rain 1s linear forwards;
  }
}
</style>
<!-- 再开一个style  js生成的doM  vue不会加v-data属性 开了scroped会应用不到属性 -->

<style lang="scss">
.circle {
  .cloud {
    .text {
      animation: rain 1s linear forwards;
    }
  }
}

@keyframes rain {
  0% {
    transform: translateY(0) scale(1);
  }

  80% {
    transform: translateY(330px) scale(1);
  }

  100% {
    transform: translateY(300px) scale(1.3);
    opacity: 0;
  }
}
</style>
